<!DOCTYPE html>

<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="/media/css/style.css">
	<script type="text/javascript" src="/media/js/jquery.js"></script>
	<script type="text/javascript" src="/media/js/jquery.tmpl.js"></script>
	<script type="text/javascript" src="/media/js/link.handler.js"></script>

	<script type="text/javascript">
		var Application = function($) {
			this.structure = {};

			this.setConnections = function(connections) {
				for (var n in connections) {
					this.structure[connections[n].name] = { info: connections[n] };
				}
			};

			this.getConnections = function() {
				var result = new Array();

				for (var name in this.structure) {
					if (this.structure.hasOwnProperty(name)) {
						result.push(this.structure[name].info);
					}
				}
				return result;
			};

			this.getConnectionByElement = function(element) {
				return $(element).closest('.connectionItem').find('.connectionLink:first .link').text();
			};

			this.setSoftwareInfo = function(info) {
				$('#softwareName').tmpl(info).appendTo('#softwareInfo');
			};

			this.drawConnections = function() {
				$('#connectionItem').tmpl(this.getConnections(), {proto: 'postgres'}).appendTo('#connectionList');
			};

			this.fetchDatabases = function(el) {
				$.getJSON('/db/' + this.getConnectionByElement(el), function(data) {
					var area = $(el).closest('.connectionItem').find('.connectionContent').empty();
					$('#databaseItem').tmpl(data, {}).appendTo(area);
				});
			};

			this.fetchSchemes = function(el) {
				var db = $(el).attr('href');
				$.getJSON('/db/' + db + '/' + this.getConnectionByElement(el), function(data) {
					var area = $(el).closest('.databaseItem').find('.databaseContent').empty();
					$('#schemaItem').tmpl(data, {db: db}).appendTo(area);
				});
			};

			this.fetchTables = function(el) {
				var schema = $(el).attr('href');
				$.getJSON('/db/' + schema + '/' + this.getConnectionByElement(el), function(data) {
					var area = $(el).closest('.schemaItem').find('.schemaContent').empty();
					$('#tableItem').tmpl(data, {schema: schema}).appendTo(area);
				});
			};

			this.toggleChevron = function(el, expanded) {
				var block = $(el).closest('div');

				block.next('div').toggleClass('g-hidden', !expanded);
				block.find('.iconChevron').toggleClass('iconChevronExpanded', expanded);
			};

			var that = this;

			$.ajax('init', {
				'async': false,
				'dataType': 'json',
				'error': function(jqXHR, textStatus, errorThrown) { alert(errorThrown); },
				'success': function(data, textStatus, jqXHR) {
					that.setSoftwareInfo(data);
					that.setConnections(data.config.connections);
					that.drawConnections();
				}
			});

			$('#connectionList').delegate('.connectionLink', 'click', function(event){
				event.preventDefault();
				that.fetchDatabases(this);
				that.toggleChevron(this, true);
			}).delegate('.databaseLink', 'click', function(event){
				event.preventDefault();
				that.fetchSchemes(this);
				that.toggleChevron(this, true);
			}).delegate('.schemaLink', 'click', function(event){
				event.preventDefault();
				that.fetchTables(this);
				that.toggleChevron(this, true);
			}).delegate('.iconChevron', 'click', function(event){
				var chevron = $(this);
				var content = chevron.closest('div').next('div');

				if (content.is(':empty')) {
					chevron.next('a').trigger('click');
				} else {
					that.toggleChevron(this, !chevron.hasClass('iconChevronExpanded'));
				}
			});
		};

		var app;

		jQuery(function($){
			app = new Application($);

			$("#content").ajaxComplete(function(event){
				$("#table_data").addClass("m-table__hover_highlight").find("tr:odd").addClass("m-row__odd");
			});
		})
	</script>

	<script id="softwareName" type="text/x-jquery-tmpl">
		<h1>${name} ${version}</h1>
	</script>

	<script id="connectionItem" type="text/x-jquery-tmpl">
		<li class="connectionItem">
			<div class="connectionTitle">
				<span class="icon iconChevron"></span><!--
			 --><a class="connectionLink" href="${$item.proto}://${user}@${host}{{if port != 5432}}:${port}{{/if}}"><!--
				 --><span class="icon iconConnection"></span>
					<span class="link">${name}</span>
				</a>
			</div>
			<div class="connectionContent"></div>
		</li>
	</script>

	<script id="databaseItem" type="text/x-jquery-tmpl">
		<div class="databaseItem">
			<div class="databaseTitle">
				<span class="icon iconChevron"></span><!--
			 --><a class="databaseLink" href="${$data}"><!--
				 --><span class="icon iconDatabases"></span>
					<span class="link">${$data}</span>
				</a>
			</div>

			<div class="databaseContent"></div>
		</div>
	</script>

	<script id="schemaItem" type="text/x-jquery-tmpl">
		<div class="schemaItem">
			<div class="schemaTitle">
				<span class="icon iconChevron"></span><!--
			 --><a class="schemaLink" href="${$item.db}/schema/${$data}"><!--
				 --><span class="icon iconDatabase"></span>
					<span class="link">${$data}</span>
				</a>
			</div>

			<div class="schemaContent"></div>
		</div>
	</script>

	<script id="tableItem" type="text/x-jquery-tmpl">
		<div class="tableItem">
			<div class="tableTitle">
				<!--<span class="icon iconChevron"></span>--><!--
			 --><a class="tableLink" href="${$item.schema}/table/${$data}"><!--
				 --><span class="icon iconTable"></span>
					<span class="link">${$data}</span>
				</a>
			</div>

			<div class="tableContent"></div>
		</div>
	</script>

	<script id="logItem" type="text/x-jquery-tmpl">
		
	</script>

</head>

<body>

<div id="wrapper">

	<div id="header">
		<div id="softwareInfo"></div>
		<div id="nav_tabs">
			<ul class="b-list__nobullet">
				<li class="b-tab m-active-tab">
					<i class="b-maintab b-tabs-l"><!----></i>
					<i class="b-maintab b-tabs-r"><!----></i>
					<div id="nav_connection"><a href="">connect</a></div>
				</li><!--
				--><li class="b-tab">
					<i class="b-maintab b-tabs-l"><!----></i>
					<i class="b-maintab b-tabs-r"><!----></i>
					<div id="nav_database"><a href="">db</a></div>
				</li><!--
				--><li class="b-tab">
					<i class="b-maintab b-tabs-l"><!----></i>
					<i class="b-maintab b-tabs-r"><!----></i>
					<div id="nav_schema"><a href="">schema</a></div>
				</li><!--
				--><li class="b-tab">
					<i class="b-maintab b-tabs-l"><!----></i>
					<i class="b-maintab b-tabs-r"><!----></i>
					<div id="nav_table"><a href="">table</a></div>
				</li><!--
				--><li class="b-tab">
					<i class="b-maintab b-tabs-l"><!----></i>
					<i class="b-maintab b-tabs-r"><!----></i>
					<div id="nav_sql_console"><a href="">Console</a></div>
				</li>
			</ul>
		</div>
	</div>

	<div id="page">

		<div id="sidebar">
			<div class="decor-border">
				<ul id="connectionList">
				</ul>
			</div>
		</div>

		<div id="content">
			<div id="server_menu" class="b-text">
				<ul class="b-list__nobullet b-list__horizontal">
					<li><a href="#SQLConsole" rel="">SQL Console</a></li>
					<li><a href="#Debug" rel="">Debug</a></li>
					<li><a href="#" rel=""></a></li>
				</ul>
			</div>

		</div>
	</div>

	<div id="logPanel">

	</div>

</div>

</body>
</html>
